<template>
    <el-dialog :model-value="props.visible" title="用纸需求单" center width="38%" @close="handleClose">
        <el-form ref="formRef" :model="formData">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="纸张类型">{{ props.paperInfo?.paperName }}</el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="纸张详情">{{ `${props.paperInfo?.weight}g * ${props.paperInfo?.length}mm * ${props.paperInfo?.width}mm` }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="需求数量">{{ props.paperInfo?.produceNumber }}</el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="用纸渠道" prop="useMethod" >
                <el-select v-model="formData.useMethod">
                    <el-option value="1" label="对外采购"></el-option>
                    <el-option value="2" label="外协仓库"></el-option>
                </el-select>
            </el-form-item>
            <el-row>
                <el-col :span="10">
                    <el-form-item label="库存用纸" prop="paperType" >
                        <el-select v-model="selectedPaper" value-key="id" :disabled="isDisabled" placeholder="请选择">
                            <el-option v-for="item in paperList" :key="item.id" :label="`${item.productSubcategoryName + item.specsDetail}`" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    {{ `现有库存：${selectedPaper?.currentInventory || 0}` }}
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-form-item label="生产数量" prop="produceNumber">
                        <el-input type="number" v-model.number="formData.produceNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="用纸数量" prop="useNumber">
                        <el-input type="number" v-model.number="formData.useNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button  type="primary"  >确 定</el-button>
            <el-button @click="handleClose">取 消</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getAuxiliaryByTypeApi } from '@/api/sj/warehouse/auxiliary';

const formRef = ref<FormInstance>();

const props = defineProps<{
    visible: boolean;
    paperInfo: any;
    paperType: any[]
}>();
const emits = defineEmits(['close']);
//纸张类型大类(外协库);
const majorCatagoryType = 'auxiliary_material_assist';

const isDisabled = ref(true);

const formData = ref({
    useMethod: '1',
    paperType: undefined,
    produceNumber: undefined,
    useNumber: undefined
});


const paperList = ref<any[]>([]);
const selectedPaper = ref<any>()


watch(()=>props.paperInfo, async (newData)=>{
    const { data } = await getAuxiliaryByTypeApi(majorCatagoryType, newData.paperType);
    paperList.value = data;
},{deep: true});

watch(()=>formData.value,(newData)=>{
    console.log(newData)
    if(newData.useMethod == '1'){
        isDisabled.value = true;
    }else{
        isDisabled.value = false;
    };
    console.log(isDisabled.value);
},{deep: true});

const handleClose = () => {
    formRef.value?.resetFields();
    selectedPaper.value = undefined;
    emits('close');
};
</script>

<style scoped>

</style>